<template>
  <div class="app-container home">
    <table-panel
      ref="tablePanel"
      align="left"
      table-data="/maintain/maintain/codingRuleRelation/list"
      :columns="columns"
      :operateArray="operateArray"
      @onOperate="onOperate"
      class="table"
    >
    </table-panel>
  </div>
</template>

<script>
import TablePanel from "@/components/TablePanel/index.vue";
import {
  codingRulesList,
  seriaNumberList,
  addCodingRuleLink,
  deleteCodingRuleLink,
} from "@/api/systemManage/runningWaterCoding/codingRuleLinkage.js";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  name: "serialNumberSetIndex",
  components: {
    TablePanel,
  },
  data() {
    return {
      operateArray: [
        {
          name: "关联",
          icon: "table-column-link",
        },
        {
          name: "取消关联",
          icon: "table-column-cancelLink",
        },
      ],
      columns: [
        {
          type: "checkout",
        },
        {
          field: "businessName",
          label: "业务类型"
        },
        {
          field: "codingruleName",
          label: "当前关联编码规则",
          type: "input",
          disabled: true,
        },
        {
          field: "codingruleId",
          label: "设置（编码规则）",
          type: "select",
          options: this.codingruleData(),
        },
        {
          field: "serialnumberName",
          label: "当前关联流水号",
          type: "input",
          disabled: true,
        },
        {
          field: "serialnumberId",
          label: "设置（流水号）",
          type: "select",
          options: this.serialnumberData(),
        },
        {
          label: "操作",
          width: "247px",
        },
      ],
    };
  },
  methods: {
    onOperate(type, row) {
      if (type === "关联") {
        if (Boolean(row.codingruleId) === false) {
          return this.$message.error("编码规则不能为空！");
        }
        if (Boolean(row.serialnumberId) === false) {
          return this.$message.error("流水号不能为空！");
        }
        this.$confirm("确认关联此条数据吗？").then(() => {
          const params = {
            businessType: row.businessType,
            codingruleId: row.codingruleId,
            serialnumberId: row.serialnumberId,
          };
          addCodingRuleLink(params)
            .then((res) => {
              this.$refs.tablePanel.getTable();
              this.$message.success("操作成功！");
            })
            .catch((err) => {
              this.$message.error("操作失败！");
            });
        });
      } else if (type === "取消关联") {
        this.$confirm("确认取消关联此条数据吗？").then(() => {
          deleteCodingRuleLink(row.businessType)
            .then((res) => {
              this.$refs.tablePanel.getTable();
              this.$message.success("操作成功！");
            })
            .catch((err) => {
              this.$message.error("操作失败！");
            });
        });
      }
    },
    // 查询编码规则列表
    codingruleData() {
      let arr = [];
      codingRulesList().then((res) => {
        if (res.rows.length > 0) {
          res.rows.forEach((item) => {
            arr.push({
              label: item.codingruleName,
              value: item.codingruleId,
            });
          });
        }
      });
      return arr;
    },
    // 查询流水号列表
    serialnumberData() {
      let arr = [];
      seriaNumberList().then((res) => {
        if (res.rows.length > 0) {
          res.rows.forEach((item) => {
            arr.push({
              label: item.serialnumberName,
              value: item.serialnumberId,
            });
          });
        }
      });
      return arr;
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep app-container el-form-item__label {
  color: #000 !important;
}
.table {
  ::v-deep .cell {
    .el-button {
      &:nth-child(2) {
        width: 112px;
      }
    }
  }
}
</style>
